<template>
  <div>
    <el-scrollbar style="height: 83vh; overflow-x: hidden">
      <div class="rightTop">
        <div class="customBox">
          <span class="leftTitle">账号：</span>
          <span class="leftContent">{{ menubar?.username }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">昵称：</span>
          <span class="leftContent">{{ menubar?.nick_name }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">手机号码：</span>
          <span class="leftContent">{{ menubar?.phone }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">用户邮箱：</span>
          <span class="leftContent">{{ menubar?.email }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">登录IP：</span>
          <span class="leftContent">{{ menubar?.login_last_ip }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">登录时间：</span>
          <span class="leftContent">{{ menubar?.login_last_at }}</span>
        </div>
        <div class="customBox">
          <span class="leftTitle">登录次数：</span>
          <span class="leftContent">{{ menubar?.login_num }}</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { type MemberInfo } from "@/api/system/member.api";
const props = defineProps({
  menubar: {
    type: Object as () => MemberInfo,
    default: () => {},
  },
});
</script>
<style scoped lang="scss">
.call-item {
  border-bottom: solid 1px #ccc;
  padding: 10px 0;
}
.call-item-content {
  width: 80%;
  display: inline-block;
  vertical-align: middle;
  word-wrap: break-word;
}
.call-item-img {
  width: fit-content;
  display: inline-block;
  vertical-align: middle;
  word-wrap: break-word;
}
.rightTop {
  width: 90%;
  margin: auto;
  padding: 10px 0;

  .customBox {
    margin: 15px 20px;
    display: flex;

    .leftTitle {
      display: block;
      width: 140px;
      font-size: 14px;
      color: #666;
    }

    .leftContent {
      // margin-left: 20px;
      font-size: 14px;
      width: 330px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
